<template>
  <div class="number-box flowInput flowInputComponent" style="padding: 0;">
    <div class="number bzNumber">
      <!--<div class="number-item1">上行</div>-->
      <!--<div class="number-item1">下行</div>-->
      <div class="pull-left p-rl">
        <span class="arrow-top arrow">↑</span>
        <span class="unit">
          <el-select class="input" style="padding: 0;border: none;width: 64px;" v-model="upRule" placeholder="请选择">
            <el-option label="Kbps" value="Kbps"></el-option>
            <el-option label="Mbps" value="Mbps"></el-option>
            <el-option label="Gbps" value="Gbps"></el-option>
          </el-select>
        </span>
        <!--<el-input-number class="number-item2" controls-position="right" v-model="flowUp" @change="handleChange('flowUp')"-->
        <!--:min="1"></el-input-number> -->
        <el-input-number class="number-item2" :step="10" v-model="flowUp" @change="handleChange('flowUp')"
                         :min="0"></el-input-number>
        <!--<el-input-number size="mini" v-model="num7"></el-input-number>-->
      </div>
      <div class="pull-left p-rl" style="margin-left: 4%">
        <span class="arrow-top arrow" style="color: #f00;">↓</span>
        <span class="unit">
          <el-select class="input" style="padding: 0;border: none;width: 64px;" v-model="downRule" placeholder="请选择">
            <el-option label="Kbps" value="Kbps"></el-option>
            <el-option label="Mbps" value="Mbps"></el-option>
            <el-option label="Gbps" value="Gbps"></el-option>
          </el-select>
        </span>
        <el-input-number class="number-item2" :step="10" v-model="flowDown" @change="handleChange('flowDown')"
                         :min="0"></el-input-number>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      initUp: {
        default: "",
      },
      initChannel: {
        default: false,
      },
      initDown: {
        default: "",
      },
      initIndex: {
        default: ""
      }
    },
    data() {
      return {
        flowUp: 0,
        flowDown: 0,
        upRule: 'Mbps',
        downRule: 'Mbps',
      }
    },
    watch: {
      initUp(newVal, oldVal) {
        this.$nextTick(()=>{
          if (this.initUp != "") {
            // this.upRule = "Kbps";
            this.initUp = parseInt(this.initUp);
            if (this.initUp == 0) {
              this.flowUp = this.initUp / 1000;
              this.upRule = "Mbps";
            } else {
              if(this.initChannel){
                if (this.initUp % (1000 * 1000 * 1000) == 0) {
                  this.flowUp = this.initUp / (1000 * 1000 * 1000);
                  this.upRule = "Gbps";
                } else if (this.initUp % (1000 * 1000) == 0) {
                  this.flowUp = this.initUp / (1000 * 1000);
                  this.upRule = "Mbps";
                } else if (this.initUp % 1000 == 0) {
                  this.flowUp = this.initUp / 1000;
                  this.upRule = "Kbps";
                }
              }else{
                let newNumber=this.upRule=='Gbps'?this.initUp*1000000000:this.upRule=='Mbps'?this.initUp*1000000:this.initUp*1000;
                if(newNumber>=1000000000000){
                  // newNumber=1000000000000;
                }
                if (newNumber % (1000 * 1000 * 1000) == 0) {
                  this.flowUp = newNumber / (1000 * 1000 * 1000);
                  this.upRule = "Gbps";
                } else if (newNumber % (1000 * 1000) == 0) {
                  this.flowUp = newNumber / (1000 * 1000);
                  this.upRule = "Mbps";
                } else if (newNumber % 1000 == 0) {
                  this.flowUp = newNumber / 1000;
                  this.upRule = "Kbps";
                }
              }
            }
          }
          this.$emit('getFlowUp', this.flowUp + this.upRule);
        })
      },
      initDown(newVal, oldVal) {
        this.$nextTick(()=>{
          if (this.initDown != "") {
            // this.downRule = "Mbps";
            this.initDown = parseInt(this.initDown);
            if (this.initDown == 0) {
              this.flowDown = this.initDown / 1000;
              this.downRule = "Mbps";
            } else {
              if(this.initChannel){
                if (this.initDown % (1000 * 1000 * 1000) == 0) {
                  this.flowDown = this.initDown / (1000 * 1000 * 1000);
                  this.downRule = "Gbps";
                } else if (this.initDown % (1000 * 1000) == 0) {
                  this.flowDown = this.initDown / (1000 * 1000);
                  this.downRule = "Mbps";
                } else if (this.initDown % 1000 == 0) {
                  this.flowDown = this.initDown / 1000;
                  this.downRule = "Kbps";
                }
              }else{
                let newNumber=this.downRule=='Gbps'?this.initDown*1000000000:this.downRule=='Mbps'?this.initDown*1000000:this.initDown*1000;
                if(newNumber>=1000000000000){
                  // newNumber=1000000000000;
                }
                if (newNumber % (1000 * 1000 * 1000) == 0) {
                  this.flowDown = newNumber / (1000 * 1000 * 1000);
                  this.downRule = "Gbps";
                } else if (newNumber % (1000 * 1000) == 0) {
                  this.flowDown = newNumber / (1000 * 1000);
                  this.downRule = "Mbps";
                } else if (newNumber % 1000 == 0) {
                  this.flowDown = newNumber / 1000;
                  this.downRule = "Kbps";
                }
              }
            }
          }
          this.$emit('getFlowDown', this.flowDown + this.downRule);
        })
      },
      flowUp(newVal, oldVal) {
        if (newVal == undefined) {
          if (this.initIndex !== "") {
            this.$emit('getFlowUp', '' + this.upRule + "&index=" + this.initIndex);
          } else {
            this.$emit('getFlowUp', '' + this.upRule);
          }
        } else {
          if (this.initIndex !== "") {
            this.$emit('getFlowUp', newVal + this.upRule + "&index=" + this.initIndex);
          } else {
            this.$emit('getFlowUp', newVal + this.upRule);
          }
        }
      },
      flowDown(newVal, oldVal) {
        if (newVal == undefined) {
          if (this.initIndex !== "") {
            this.$emit('getFlowDown', '' + this.downRule + "&index=" + this.initIndex);
          } else {
            this.$emit('getFlowDown', '' + this.downRule);
          }
        } else {
          if (this.initIndex !== "") {
            this.$emit('getFlowDown', newVal + this.downRule + "&index=" + this.initIndex);
          } else {
            this.$emit('getFlowDown', newVal + this.downRule);
          }
        }
      },
      upRule(newVal, oldVal) {
        if (this.initIndex !== "") {
          this.$emit('getFlowUp', this.flowUp + newVal + "&index=" + this.initIndex);
        } else {
          this.$emit('getFlowUp', this.flowUp + newVal);
        }
      },
      downRule(newVal, oldVal) {
        if (this.initIndex !== "") {
          this.$emit('getFlowDown', this.flowDown + newVal + "&index=" + this.initIndex);
        } else {
          this.$emit('getFlowDown', this.flowDown + newVal);
        }
      },
    },
    mounted() {
      this.$nextTick(() => {
        if (this.initUp != "") {
          this.initUp = parseInt(this.initUp);
          if (this.initUp == 0) {
            this.flowUp = this.initUp / 1000;
            this.upRule = "Mbps";
          } else {
            if (this.initUp % (1000 * 1000 * 1000) == 0) {
              this.flowUp = this.initUp / (1000 * 1000 * 1000);
              this.upRule = "Gbps";
            } else if (this.initUp % (1000 * 1000) == 0) {
              this.flowUp = this.initUp / (1000 * 1000);
              this.upRule = "Mbps";
            } else if (this.initUp % 1000 == 0) {
              this.flowUp = this.initUp / 1000;
              this.upRule = "Kbps";
            }
          }
        }

        if (this.initDown != "") {
          this.initDown = parseInt(this.initDown);
          if (this.initDown == 0) {
            this.flowDown = this.initDown / 1000;
            this.downRule = "Mbps";
          } else {
            if (this.initDown % (1000 * 1000 * 1000) == 0) {
              this.flowDown = this.initDown / (1000 * 1000 * 1000);
              this.downRule = "Gbps";
            } else if (this.initDown % (1000 * 1000) == 0) {
              this.flowDown = this.initDown / (1000 * 1000);
              this.downRule = "Mbps";
            } else if (this.initDown % 1000 == 0) {
              this.flowDown = this.initDown / 1000;
              this.downRule = "Kbps";
            }
          }
        }
        this.$emit('getFlowUp', this.flowUp + this.upRule);
        this.$emit('getFlowDown', this.flowDown + this.downRule);
      })
    },
    methods: {
      handleChange(text) {
        // this[text]=this[text].replace(/[^\d]/ig,'');
      },
      checkKey(e) {

      },
    }
  }
</script>

<style scoped lang="less" type="text/less">
  .number-box {
    display: flex;
    align-items: center;
    height: auto;
    border: 0;
    label {
      width: 60px;
      text-align: right;
      margin-right: 15px;
      color: #333;
      font-weight: 600;
    }
    .p-rl {
      width: 48%;
      position: relative;
      .arrow {
        position: absolute;
        z-index: 55;
        right: 90px;
        top: 4px;
        font-size: 20px;
        color: #409EFF;
      }
    }
    .number {
      flex: 1;
      .number-item1 {
        float: left;
        width: 50%;
        background: #409eff;
        color: #fff;
        text-align: center;
        padding: 5px;
      }
      .number-item2 {
        float: left;
        width: 100%;
      }
    }
  }

  .unit {
    position: absolute;
    right: 22px;
    z-index: 555;
    font-size: 13px;
    top: 5px;
    height: 28px;
    border-left: 1px solid #dcdfe6;
    overflow: hidden;
  }
</style>
